<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    :width="800"
    destroy-on-close
    @closed="$emit('closed')"
    :close-on-click-modal="false"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="活动标题" prop="title">
        <el-input v-model="form.title" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="活动副标题" prop="sub_title">
        <el-input v-model="form.sub_title" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="生效日期" prop="week_day">
        <el-select
          v-model="form.week_day"
          placeholder="请选择天数"
          style="width: 600px"
        >
          <el-option label="星期一" value="1"></el-option>
          <el-option label="星期二" value="2"></el-option>
          <el-option label="星期三" value="3"></el-option>
          <el-option label="星期四" value="4"></el-option>
          <el-option label="星期五" value="5"></el-option>
          <el-option label="星期六" value="6"></el-option>
          <el-option label="星期日" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动玩法" prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择活动玩法"
          style="width: 600px"
        >
          <el-option label="必中现金" value="1"></el-option>
          <el-option label="聚划算" value="2"></el-option>
          <el-option label="N倍送" value="3"></el-option>
          <el-option label="首单N元" value="4"></el-option>
          <el-option label="加1元发送N" value="5"></el-option>
          <el-option label="买N送N" value="6"></el-option>
        </el-select>
      </el-form-item>
      <div v-if="form.type != ''">
        <component
          :is="component"
          :key="component"
          :form="componentData"
          @updateComponet="updateComponet"
        />
      </div>
      <el-form-item label="限购次数" prop="buy_limit_num">
        <el-input
          v-model="form.buy_limit_num"
          style="width: 600px"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="关联的盲盒" prop="blindbox_id">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="ckBlindbox"
          >选择盲盒</el-button
        >
        <el-table :data="selectedGoods" style="width: 100%">
          <el-table-column
            prop="name"
            width="250px"
            :show-overflow-tooltip="true"
            label="盲盒名"
          >
          </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template #default="scope">
              <el-button
                @click="handleDel(scope.$index)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>

  <el-dialog
    title="选择资源"
    v-model="resourceVisible"
    :width="1200"
    destroy-on-close
  >
    <Attachment :select-num="1" @selectedFiles="selectedFiles"></Attachment>
  </el-dialog>

  <el-dialog
    title="盲盒选择"
    v-model="dialogVisible"
    destroy-on-close
    width="1000px"
  >
    <blindbox
      :selectedgoods="selectedGoods"
      @handleSelected="handleSelected"
      :goods-type="2"
    ></blindbox>
  </el-dialog>
</template>

<script>
import Amount from "./components/amount.vue";
import Discount from "./components/discount.vue";
import Double from "./components/double.vue";
import First from "./components/first.vue";
import One from "./components/one.vue";
import Present from "./components/present";
import blindbox from "@/components/blindbox";

export default {
  components: {
    Amount,
    Discount,
    Double,
    First,
    One,
    Present,
    blindbox,
  },
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增限定",
        edit: "编辑限定",
        show: "查看",
      },
      component: "Amount",
      componentData: {},
      resourceVisible: false,
      visible: false,
      isSaveing: false,
      dialogVisible: false,
      selectedGoods: [], // 选择的盲盒
      //表单数据
      form: {
        id: "",
        type: "",
        week_day: "1",
        title: "",
        sub_title: "",
        buy_limit_num: 1, // 限购次数
        blindbox_id: 0,
        component: {
          amount: {
            amount: 0,
          },
          discount: {
            num: 0,
            type: 1, // 1折扣 2固定金额
            discount: 1,
            amount: 0,
          },
          double: {
            value: 2,
          },
          first: {
            num: 3, // 起购数量
            amount: 1,
          },
          one: {
            num: 3, // 购买数量
          },
          present: {
            buy_num: 2,
            present_num: 1,
          },
        },
      },
      plusIcon: "el-icon-plus",
      deleteIcon: "el-icon-delete",
      //验证规则
      rules: {
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        title: [{ required: true, message: "请输入活动标题", trigger: "blur" }],
        week_day: [
          { required: true, message: "请选择生效日期", trigger: "blur" },
        ],
        buy_limit_num: [
          { required: true, message: "请输入限购次数", trigger: "blur" },
        ],
        blindbox_id: [
          { required: true, message: "请选择关联的盲盒", trigger: "blur" },
        ],
        sub_title: [
          { required: true, message: "请输入活动副标题", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    "form.type": {
      handler(newVal) {
        newVal = parseInt(newVal);
        switch (newVal) {
          case 1:
            this.componentData = this.form.component.amount;
            this.component = "Amount";
            break;
          case 2:
            this.componentData = this.form.component.discount;
            this.component = "Discount";
            break;
          case 3:
            this.componentData = this.form.component.double;
            this.component = "Double";
            break;
          case 4:
            this.componentData = this.form.component.first;
            this.component = "First";
            break;
          case 5:
            this.componentData = this.form.component.one;
            this.component = "One";
            break;
          case 6:
            this.componentData = this.form.component.present;
            this.component = "Present";
            break;
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    // 表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res;
          if (this.mode == "add") {
            res = await this.$API.week.add.post(this.form);
          } else {
            res = await this.$API.week.edit.post(this.form);
          }
          this.isSaveing = false;
          if (res.code == 0) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        } else {
          return false;
        }
      });
    },
    // 表单注入数据
    setData(data) {
      this.form.id = data.id;
      this.form.type = data.type + "";
      this.form.week_day = data.week_day + "";
      this.form.title = data.title;
      this.form.sub_title = data.sub_title;
      this.form.buy_limit_num = data.buy_limit_num;
      this.form.blindbox_id = data.blindbox_id;

      let componentData = JSON.parse(data.config);

      if (data.type == "amount") {
        this.form.component.amount = componentData;
      } else if (data.type == "discount") {
        this.form.component.discount = componentData;
      } else if (data.type == "double") {
        this.form.component.double = componentData;
      } else if (data.type == "first") {
        this.form.component.first = componentData;
      } else if (data.type == "one") {
        this.form.component.one = componentData;
      } else if (data.type == "present") {
        this.form.component.present = componentData;
      }

      this.getBlindboxInfo(data.blindbox_id);

      return this;
    },
    // 组件更新数据
    updateComponet(content) {
      console.log("更新数据", content);
      if (content.type == "amount") {
        this.form.component.amount = content.value;
      } else if (content.type == "discount") {
        this.form.component.discount = content.value;
      } else if (content.type == "double") {
        this.form.component.double = content.value;
      } else if (content.type == "first") {
        this.form.component.first = content.value;
      } else if (content.type == "one") {
        this.form.component.one = content.value;
      } else if (content.type == "present") {
        this.form.component.present = content.value;
      }
    },
    // 确认选择盲盒
    handleSelected(newSelected) {
      this.selectedGoods = newSelected;
      this.form.blindbox_id = newSelected[0].id;
      this.dialogVisible = false;
    },
    // 选择盲盒
    ckBlindbox() {
      this.dialogVisible = true;
    },
    // 删除选择的盲盒
    handleDel(index) {
      this.selectedGoods.splice(index, 1);
    },
    // 获取盲盒信息
    async getBlindboxInfo(id) {
      let res = await this.$API.week.getInfo.get({ blindbox_id: id });
      this.selectedGoods = [res.data];
    },
  },
};
</script>

<style scoped>
</style>
